<!--
 * @Author: your name
 * @Date: 2021-08-25 15:18:51
 * @LastEditTime: 2021-08-25 15:18:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\others\404.vue
-->
<template>
  <Card :loading="isLoad">
    <template #title>
      <div class="card_header">
        <div class="card_header_title">
          {{ title }}
        </div>
        <div class="card_header_time">
          <Tag>时间：{{ time }}</Tag>
        </div>
      </div>
    </template>
    <ADescriptions bordered>
      <ADescriptionsItem :span="1" label="主机名称"> {{ datas.hostName }} </ADescriptionsItem>
      <ADescriptionsItem :span="3" label="IP"> {{ datas.Ip }} </ADescriptionsItem>
      <ADescriptionsItem :span="1" label="操作系统"> {{ datas.type }} </ADescriptionsItem>
        <ADescriptionsItem :span="1" label="运行核心数"> {{ datas.cpuCores }} </ADescriptionsItem>
      <ADescriptionsItem :span="3" label="总内存"> {{ datas.totalMem }} </ADescriptionsItem>
    
    </ADescriptions>
  </Card>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Card, Row, Col, Tag } from 'ant-design-vue';
import type { PropType } from 'vue';
interface DataType {
  hostName: String;
  cpuCores: Number;
  Ip: String;
  type: String;
  totalMem: String;
}
export default defineComponent({
  name: 'serviceEch',
  components: {
    Card,
    Row,
    Col,
    Tag
  },
  props: {
    title: String,
    time:String,
    isLoad:Boolean,
    datas: {
      type: Object as PropType<DataType>,
      default: () => {
        return {
          hostName:'-',
          cpuCores: '-',
          Ip: '-',
          type: '-',
          totalMem: '-'
        };
      }
    }
  },
  setup() {
    return {};
  }
});
</script>

<style lang="less" scoped>
.card_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  &_title {
    font-size: 13px;
    color: #666;
  }
}
</style>
